<template>
  <div>
    <Row class="banner">
      <h1>政治教育情况</h1>
      <h2>贵阳市消防支队政治教育学习情况总览</h2>
    </Row>
    <Row :gutter="16" type="flex" justify="start" class="row">
      <Col span="6">
        <Card>
          <p slot="title">
            <span>课件热度情况</span>
          </p>
          <div class="chart" id="chart-lesson-heat"></div>
          <Divider />
          <span class="text">热度最高课件类型：{{heatestName}}</span>
          <Spin fix v-if="loading.lessonHeat" size="large"></Spin>
        </Card>
      </Col>
      <Col span="6">
        <Card>
          <p slot="title">
            <span>党员发展情况</span>
          </p>
          <div class="chart" id="chart-member-development"></div>
          <Divider />
          <span class="text">党员总数：{{memberCount}}人</span>
          <Spin fix v-if="loading.memberDevelopment" size="large"></Spin>
        </Card>
      </Col>
      <Col span="12">
        <Card>
          <p slot="title">
            <span>近一个月课件投稿情况</span>
          </p>
          <div class="chart" id="chart-lesson-submit"></div>
          <Divider />
          <span class="text">累计课件总量：{{lessonCount}}个</span>
          <Spin fix v-if="loading.lessonSubmit" size="large"></Spin>
        </Card>
      </Col>
    </Row>
    <Row :gutter="16" type="flex" justify="start" class="row">
      <Col span="24">
        <Card>
          <p slot="title">
            <span>政治教育课件一览表</span>
          </p>
          <ul class="toolbar" slot="extra">
            <li class="item">
              <span class="text">按类别筛选</span>
              <Select v-model="className" size="default">
                <Option v-for="(item,index) in classList" :value="item" :key="'cn-'+item">{{item}}</Option>
              </Select>
            </li>
            <li class="item">
              <span class="text">按时间段筛选</span>
              <Date-picker
                type="datetimerange"
                @on-change="handleSelectDate"
                style="width:320px;"
                 size="default"
                placeholder="选择起止日期和时间"
              ></Date-picker>
            </li>
            <li class="item">
              <Input
                v-model="keyword"
                placeholder="输入课件名称搜索"
                size="default"
                :search="true"
                @on-search="renderTable"
                enter-button="立即搜索"
              ></Input>
            </li>
          </ul>
          <Table :columns="tableColumns" :data="tableData"></Table>
          <Divider />
          <Page :total="pageCount" show-elevator @on-change="renderTable"></Page>
          <Spin v-if="loading.table" fix size="large"></Spin>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "",
  data() {
    return {
      loading: {
        lessonHeat: false,
        memberDevelopment: false,
        lessonSubmit: false,
        table: false
      },
      option: {
        lessonHeat: false,
        memberDevelopment: false,
        lessonSubmit: false
      },
      heatestName: null,
      memberCount: 0,
      lessonCount: 0,
      startTime: this.dateShift(-723) + "23:59:59",
      endTime: this.dateShift(0) + " 23:59:59",
      className: null,
      classList: [],
      keyword: null,
      pageCount: 0,
      tableData: [],
      tableColumns: [
        {
          title: "序号",
          key: "index",
          align: "center",
          width: 80
        },
        {
          title:'操作',
          key:'operation',
          align:'center',
          width:100,
          render(h,params) {
            return h('a',{
              attrs:{
                href:`http://xf.58xiao.com${params.row.FileAddress}`,
                target:'_blank'
              },
              style:{
                color:'#2d8cf0'
              }
            },'点击浏览')
          },
        },
        {
          title: "课件标题",
          key: "lessonName",
          align: "center"
          
        },
        {
          title: "课件发布时间",
          key: "lessonPubdate",
          align: "center"
        },
        {
          title:'发布人',
          key:'lessonCreator',
          align:'center',
          width:160
        },
        {
          title: "所属分类",
          key: "lessonClass",
          align: "center"
        },
        {
          title: "媒体形式",
          key: "lessonMedia",
          align: "center",
          width: 120
        },
        {
          title: "浏览量",
          key: "heatCount",
          align: "center",
          width: 80
        }
      ]
    };
  },
  methods: {
    renderChart_LessonHeat() {
      this.loading.lessonHeat = true;
      this.option.lessonHeat = {
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{a}:{b}\n{c}"
        },
        legend: {
          show: true,
          top: "top",
          left: "center",
          data: [],
          orient: "horizontal",
          itemWidth: 12,
          itemHeight: 12,
          textStyle: { fontSize: 12 }
        },
        color: this.COLORS,
        series: [
          {
            type: "pie",
            name: "政治教育课件平均访问量",
            radius: "60%",
            center: ["50%", "55%"],
            data: [],
            itemStyle: {
              normal: {
                shadowOffsetX: 3,
                shadowOffsetY: 3,
                shadowBlur: 7,
                shadowColor: "#00000033"
              }
            },
            label: {
              normal: {
                show: true,
                position: "outside",
                fontSize: 12,
                formatter: "{b}\n{c}次"
              }
            }
          }
        ]
      };
      let params = {
          startTime:this.dateShift(-720) + ' 00:00:00',
          endTime:this.dateShift(0) + ' 23:59:59'
      }
      axios.get(this.URLHEAD_DVS + 'GovernmentEducationr',{params:params}).then(res=>{
          let json = res.data
          this.heatestName = json.Data.coursewareType
          this.option.lessonHeat.legend.data = json.Data.list.map(o=>{
              return o.name
          })
          this.option.lessonHeat.series[0].data = json.Data.list
          this.$Crender('chart-lesson-heat',this.option.lessonHeat)
          this.loading.lessonHeat = false
      })
    },
    renderChart_memberDevelopment() {
        this.loading.memberDevelopment = true
        this.option.memberDevelopment = {
          legend: {
            top: 'top',
            left: 'left',
            data: ["中共党员", "可发展党员"],
            itemWidth: 10,
            itemHeight: 10
          },
          grid: {
            left: "10",
            right: "10",
            bottom: "10",
            containLabel: true
          },
          tooltip: {
            show: "true",
            trigger: "axis",
            axisPointer: {type: "shadow" }
          },
          xAxis: {
            type: "value",
            axisTick: { show: false },
            axisLine: {show: false},
            splitLine: {show: true}
          },
          yAxis:{
              type: "category",
              axisTick: { show: false },
              axisLine: {show: true},
              data:[]
          },
          series: [
            {
              name: "中共党员",
              stack: "总量",
              type: "bar",
              itemStyle: {
                normal: {
                  show: true,
                  borderWidth: 0,
                  borderColor: "#333",
                  color: "#36afe0",
                  label: {
                    show: true,
                    textStyle: {
                      color: "#fff"
                    },
                    position: "inside",
                    formatter: function(p) {
                      return p.value > 0 ? p.value : "";
                    }
                  }
                }
              },
              barGap: "0%",
              barCategoryGap: "50%",
              data:[]
            },
            {
              name: "可发展党员",
              stack: "总量",
              type: "bar",
              itemStyle: {
                normal: {
                  show: true,
                  borderWidth: 0,
                  borderColor: "#333",
                  color: "#f99a04",
                  label: {
                    show: true,
                    textStyle: {
                      color: "#fff"
                    },
                    position: "inside",
                    formatter: function(p) {
                      return p.value > 0 ? p.value : "";
                    }
                  }
                }
              },
              barGap: "0%",
              barCategoryGap: "50%",
              data: []
            }
          ]
        };
        let params = {
            startTime:this.dateShift(-720) + ' 00:00:00',
            endTime:this.dateShift(0)+' 23:59:59'
        }
        axios.get(this.URLHEAD_DVS + 'GartyMemberConditionPro',{params:params}).then(res=>{
            let json = res.data
            json.Data.forEach((o,i)=>{
                this.memberCount = this.memberCount + o.members;
            })
            this.option.memberDevelopment.yAxis.data = json.Data.map(o=>{
                return o.name
            })
            this.option.memberDevelopment.series[0].data = json.Data.map(o=>{
                return o.members
            })
            this.option.memberDevelopment.series[1].data = json.Data.map(o=>{
                return o.nonPartisans
            })
            this.$Crender('chart-member-development',this.option.memberDevelopment)
            this.loading.memberDevelopment = false
        })
    },
    renderChart_LessonSubmit() {
      this.loading.lessonSubmit = true
      this.option.lessonSubmit = {
        grid: { top: 20, left: 20, right: 20, bottom: 20, containLabel: true },
        tooltip: { show: true, trigger: "item", formatter: "{b}投稿数量:{c}" },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
          axisLine: { show: true, lineStyle: { color: "#333" } },
          axisTick: { show: true, lineStyle: { color: "#333" } },
          axisLabel: { show: true, textStyle: { fontSize: 12, color: "#333" } },
          splitLine: { show: true, lineStyle: { color: "#33333325" } },
          splitArea: { show: true, areaStyle: { color: "#33333305" } }
        },
        yAxis: {
          type: "value",
          axisLine: { show: true, lineStyle: { color: "#333" } },
          axisTick: { show: true, lineStyle: { color: "#333" } },
          axisLabel: { show: true, textStyle: { fontSize: 12, color: "#333" } },
          splitLine: { show: true, lineStyle: { color: "#33333325" } },
          splitArea: { show: true, areaStyle: { color: "#33333302" } }
        },
        series: [
          {
            type: "line",
            data: [],
            lineStyle: {
              color: {
                type:'linear',x:0,y:0,x2:1,y:0,
                colorStops:[{offset:0,color:'#2db7f5'},{offset:1,color:'#19be6b'}]
              },
              width: 3,
              shadowColor: '#00000045',
              shadowBlur:12,
              shadowOffsetX:0,
              shadowOffsetY:5
            },
            itemStyle:{
              show:true,
              color:'#fff',
              shadowColor: '#00000085',
              shadowBlur:5,
              shadowOffsetX:0,
              shadowOffsetY:2
            },

            areaStyle: { 
              show: true, 
              color: {
                type:'linear',x:0,y:0,x2:1,y:0,
                colorStops:[{offset:0,color:'#2db7f575'},{offset:1,color:'#19be6b75'}]
              } 
            },
            label: { show: true, position: "top", fontSize: 12,color:'#141414' }
          }
        ]
      };
      let params = {
        startTime:this.dateShift(-30) + ' 00:00:00',
        endTime:this.dateShift(0) + ' 23:59:59'
      }
      axios.get(this.URLHEAD_DVS + 'GetTimeAxisBookCount',{params:params}).then(res=>{
        let json = res.data
        this.option.lessonSubmit.xAxis.data = json.Data.map(o=>{
          return o.Time
        })
        this.option.lessonSubmit.series[0].data = json.Data.map(o=>{
          return {name:o.Time,value:o.BookCount}
        })
        this.$Crender('chart-lesson-submit',this.option.lessonSubmit)
        this.loading.lessonSubmit = false
      })
      axios.get(this.URLHEAD_TA + 'DZJS_ZJJYFX').then(res=>{
        let json = res.data
        this.lessonCount = json.Data.KJZL
        this.loading.lessonSubmit = false
      })
    },
    renderTable(index) {
      this.loading.table = true
      let params = {
        startTime:this.startTime,
        endTime:this.endTime,
        searchKey:this.keyword,
        selectKey:this.className,
        pageIndex:index,
        pageSize:10
      }
      axios.get(this.URLHEAD_TA + 'GetBBSList',{params:params}).then(res=>{
        let json = res.data
        this.pageCount = json.count
        this.tableData = json.Data.map((o,i)=>{
          return {
            index:i+1,
            lessonName:o.FileName,
            lessonPubdate:o.Modified,
            lessonCreator:o.UserName,
            lessonClass:o.FileResTypeName,
            lessonMedia:o.FileType,
            heatCount:o.ClickCount,
            FileAddress:o.FileAddress
          }
        })
        this.loading.table = false
      })
    },
    handleSelectDate(daterange) {
      this.startTime = daterange[0];
      this.endTime = daterange[1];
    }
  },
  created(){
    this.classList = ['中队思想政治教育', '专家讲座', '支队机关思想政治教育', '大队思想政治教育', '思想政治教育计划', '学习训词专题教育',
                '教员授课', '骨干课堂', '交流学堂', '训词专题教育','“学训词 铸忠诚 创新业 立新功”主题教育', '中队政治教育', '大队政治教育','机关政治教育','政治教育计划']
  },
  mounted() {
      this.renderChart_LessonHeat()
      this.renderChart_memberDevelopment()
      this.renderChart_LessonSubmit()
      this.renderTable(0)
  }
};
</script>

<style lang="" scoped>
.chart{
    height:375px;
}
.toolbar .item{
  min-width: 300px;
  display: flex;
  flex-flow: row nowrap;
  align-items:center;
}
.toolbar .text{
  min-width: 100px;
  flex-grow: 0;
}
</style>